<template>
    <basic-container>
        <avue-crud :option="option"
                   :data="data"
                   :page="page"
                   @on-load="onLoad"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   @search-change="searchChange"
                   @search-reset="searchReset"
        >
            <template slot-scope="scope"
                      slot="menu">

                <el-button @click="rowUpdate(scope.row)" size="mini" type="text" v-has="'/mall-cloud-distribution/user/editItem'"> <i class="el-icon-edit"></i>编辑</el-button>

            </template>
        </avue-crud>
        <el-dialog title="编辑"
                   :visible.sync="updateDialog">
            <el-form ref="form" :model="editForm" label-width="80px">
                <el-form-item label="账户">
                    <el-input v-model="editForm.name" readonly="readonly"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-select v-model="editForm.sex" placeholder="请选择">
                        <el-option
                                v-for="item in sexSelection"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="手机号码">
                    <el-input v-model="editForm.phone"></el-input>
                </el-form-item>

                <el-form-item label="会员等级">
                    <el-select v-model="editForm.userTypeId" placeholder="请选择">
                        <el-option v-for="attr in userTypeOption" :key="attr.id" :label="attr.vipLevel"  :value="attr.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="updateDialog = false">取 消</el-button>
    <el-button :disabled="isDisable" type="primary" @click="updateChange" v-has="'/mall-cloud-distribution/user/editItem'">确 定</el-button>
  </span>
        </el-dialog>
    </basic-container>
</template>
<script>
    import {
        getList, level,
        update,checkPhone
    } from "@/api/base/member/user";
    import {mapGetters} from "vuex";


    export default {
        data() {
            return {
				isDisable: false,
                sexSelection: [{
                    label: '男',
                    value: true,
                }, {
                    label: '女',
                    value: false,
                }],

                viewDialog: false,
                updateDialog: false,
                searchForm: {},
                data: [],
                userTypeOption: {},
                radio: '1',
                page: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                editForm: {
                    name:'',
                    sex:true,
                    phone:'',
                    userTypeId:'',
                },
                option: {
                    addBtn: false,
                    editBtn: false,
                    delBtn: false,
                    viewBtn: false,
                    searchBtn: false,
                    refreshBtn: false,
                    columnBtn: false,
                    border: true,
                    menuType: "button",
                    align: 'center',
					menuWidth: 100,
					searchMenuSpan:6,
                    column: [
                        {
                            label: '创建时间',
                            prop: 'createTime',
                        },
                        {
                            label: '会员名',
                            prop: 'name',
							searchLabelWidth:70,
                            searchSpan:5,
                            search: true,
                        },
                        {
                            label: '手机号',
                            prop: 'phone',
							searchLabelWidth:70,
                            searchSpan:5,
                            search: true,
                        },
                        {
                            label: '会员等级',
                            prop: 'vipLevel',
                        },
                        {
                            label: '上级名称',
                            prop: 'disParentName',
                            searchSpan:5,
                            search: true,
                        },
                    ]
                }
            }
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList() {
                return {

                };
            },
        },
        created() {
            /*    area(0).then(res => {
                  this.areaOption = res.data.data;
                })*/
            level().then(res => {
                this.userTypeOption = res.data;
            })
        },
        methods: {
            // 点击编辑按钮

            rowUpdate(row) {
                //行编辑事件触发
				this.isDisable = false;
                this.updateDialog = true
                this.editForm.id = row.id;
                this.editForm.name = row.name;
                this.editForm.phone = row.phone;
                this.editForm.sex = row.sex;
                this.editForm.userTypeId = row.userTypeId;
                console.log(this.editForm);
                console.log(this.userTypeOption)
            },
            // 编辑确定按钮
            updateChange() {
                // this.isDisable = true;
                if(!testPhone(this.editForm.phone)) {
                    this.$message({type: "error", message: "手机号输入格式错误!"});
                    this.isDisable = false;
                    return false;
                }
                //校验手机号唯一性
                checkPhone(this.editForm.phone,this.editForm.id).then(res => {
                    if (!res.data.success) {
                        return this.$message({
                            type: "error",
                            message: res.data.message
                        });
                        this.isDisable = false;
                        return false;
                    } else {
                        debugger;
                        update(this.editForm).then(res => {
                            if (res.data.code == 200) {
                                this.editLoadU = false
                                this.loading = true;
                                this.$message({
                                    type: "success",
                                    message: "编辑成功!"
                                });
                                this.isDisable = true;
                                this.updateDialog = false;
                                this.onLoad(this.page);
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.data.message
                                });
                            }
                        });
                    }
                });
            },
            searchReset () {
                this.query = {};
                this.onLoad(this.page);
            },

            searchChange(params,done) {
                this.page.currentPage=1
                this.query = params;
                this.onLoad(this.page, params,done);
            },
            beforeOpen(done, type) {
                if (["edit", "view"].includes(type)) {
                    getList(this.form.modularName).then(res => {
                        this.resucedata = [];
                        this.form = res.data.data;
                    });
                }
                done();
            },
            sizeChange(val) {
                this.page.pageSize = val
            },
            currentChange(val) {
                this.page.currentPage = val
                this.onLoad(this.page)
            },
            refreshChangeList() {
                this.onLoadList(this.page);
            },
            onLoad(page, params = {},done) {
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    if(done){
                        done();
                    }
                    if (res.data.code == 200) {
                        this.loading = false;
                        const data = res.data;
                        this.page.total = data.count;
                        this.data = data.data;
                    }
                })
            },
        },
    };

    function testPhone(value) {
        let flag = true;
        if (!Number(value)) {
            flag = false;
        } else {
            const re = /^1[3|4|5|7|8|9][0-9]{9}$/;
            const rsCheck = re.test(value);
            if (!rsCheck) {
                flag = false;
            }
        }
        return flag;
    }
</script>

<style scoped>
    .avue-crud .avue-crud__menu {
        display: none !important;
    }

    .el-table thead {
        color: #252525 !important;
        font-weight: bold;
    }
</style>
